<template>
  <div>
    <ul class="map-control">
      <li
        v-for="(item,index) in els"
        :key="index"
        :class="item.type"
        @click.stop="setVisible(item.type)"
        :title="item.tooltip"
      >
        <div class="line" v-if="index !==0"></div>
        <div class="tubiao">
          <i :class="item.class"></i>
        </div>
      </li>
    </ul>
    <Layers
      v-show="showMapControl"
      @close="closeItem"
      :overLayerData="overLayerData"
      @getOtherLegendHidden="getOtherLegendHidden"
      @getOtherLegendVisible="getOtherLegendVisible"
      ref="layers_zw"
    ></Layers>
    <!-- 专题图层的图例 -->
    <legend-frame
      :otherLegend="otherLegends"
      @closeLegend="closeLegend"
      ref="legendFrame"
      v-show="otherLegends.length"
    ></legend-frame>
    <!-- 表格 -->
    <!-- <Table></Table>
    <chartPanel></chartPanel>-->
    <TimeLine></TimeLine>

    <h3
      class="showCurrentTime"
      v-show="currentYearMonth && currentIdenName['themerange']"
    >{{currentYearMonth.split("-")[0]}} {{getPeriodMiddle(periodType,currentYearMonth)}} {{currentIdenName['themerange']}}</h3>

    <div
      class="formMate-data-box"
      :style="`height:100%;width:${currentWidth}px`"
      v-show="enlargeTable||enlargeChart"
    >
      <transition name="el-zoom-in-center">
        <div class="transition-box table-data-box" v-show="enlargeTable||enlargeChart">
          <EnlargeTable></EnlargeTable>
          <EnlargeChart></EnlargeChart>
        </div>
      </transition>
    </div>

    <div class="historyRegionLegend"  @mousedown="mousedown" :style="styles">
      <p class="title">历史边界</p>
      <div class="content">
        <div class="color" :style="{backgroundColor:defaultLayer.lineColor}"></div>
        <p>{{defaultLayer.name}}</p>
        <div class="color" :style="{backgroundColor:activeHistoryRegion.lineColor}"></div>
        <p>{{activeHistoryRegion.name}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import Layers from "./layers";
import Table from "./table";
import chartPanel from "./chartPanel";
import LegendFrame from "@/components/LegendFrame/index";
import EnlargeTable from "./enlargeTable";
import EnlargeChart from "./enlargeChart";
import TimeLine from "./timeLine";
import historyHlLayer from "@/utils/map/lib/systemlayers/history.hl.layer.js";
import sgisMapBase from "@/utils/map/sfgis.map.base.js";
import microConfig from "static/config/micro.js";
export default {
  name: "MapControl",
  props: ["overLayerData"],
  data() {
    return {
      currentWidth: "84%",
      els: [
        //右边地图操作
        {
          class: "iconfont icon-ditu",
          type: "layercontrol-layer",
          tooltip: "底图"
        },
        {
          class: "iconfont icon-biaoge",
          type: "layercontrol-table",
          tooltip: "表格"
        },
        {
          class: "iconfont icon-tongjitubiao",
          type: "layercontrol-echarts",
          tooltip: "图表"
        },
        {
          class: "el-icon-video-play",
          type: "playMap",
          tooltip: "播放历史边界"
        }
        // {
        //   class: "iconfont icon-Fun_IconA8",
        //   type: "layercontrol-timeline",
        //   tooltip: "时间轴"
        // }
      ],
      layersVisible: false,
      tableVisible: false, //控制表格显示
      chartVisible: false, //控制图表显示
      otherLegends: [],
      timeObj: null,
      playMapStatus: false,
      defaultLayer: {},
      activeHistoryRegion: {},
      styles: {
        position: "absolute",
        bottom: "20px",
        left: "315px",
        cursor: "move",
        top:''
      },
    };
  },
  computed: {
    ...mapState({
      currentIdens: state => state.macro.currentIdens,
      showDataTable: state => state.macro.showDataTable,
      showEchartPanel: state => state.macro.showEchartPanel,
      currentYearMonth: state => state.macro.currentYearMonth,
      currentIdenName: state => state.macro.currentIdenName,
      showMapControl: state => state.macro.showMapControl,
      periodType: state => state.macro.reportType,
      enlargeTable: state => state.macro.enlargeTable,
      enlargeChart: state => state.macro.enlargeChart
    })
  },
  mounted() {
    EventBus.$on("closeAllChart", this.clearAll);
    EventBus.$on("clearPlayMap", this.clearPlayMap);
    EventBus.$on(
      "refreshBoundaryFeaturesComplete",
      this.refreshBoundaryFeaturesComplete
    );
  },
  components: {
    Layers,
    Table,
    LegendFrame,
    chartPanel,
    TimeLine,
    EnlargeTable,
    EnlargeChart
  },
  methods: {
    ...mapMutations([
      "changeShowEchartPanel",
      "changeShowDataTable",
      "changeShowTimeLine",
      "changeShowMapControl"
    ]),
    mousedown(e) {
      document.onmousemove = e2 => {
        this.styles.left = (e2.clientX - e.offsetX)+"px";
        this.styles.top = (e2.clientY - e.offsetY)+"px";
        this.styles.bottom = "auto";
      };
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmousedown = null;
      };
    },
    clearAll() {
      this.getOtherLegendHidden([]);
    },
    //关闭图层面板
    closeItem() {
      this.$store.commit("changeShowMapControl", false);
    },
    setVisible(type) {
      switch (type) {
        case "layercontrol-layer":
          if (this.showMapControl) {
            this.$store.commit("changeShowMapControl", false);
          } else {
            this.$store.commit("changeShowMapControl", true);
          }
          break;
        case "layercontrol-table":
          if (this.currentIdens.length) {
            this.changeShowDataTable(!this.showDataTable);
          } else {
            this.$message.warning("暂无数据!");
          }
          break;
        case "layercontrol-echarts":
          if (this.currentIdens.length) {
            this.changeShowEchartPanel(!this.showEchartPanel);
          } else {
            this.$message.warning("暂无数据!");
          }

          break;
        case "layercontrol-timeline":
        // this.changeShowTimeLine(!this.showTimeLine);
        case "playMap":
          this.playMap();
          break;
      }
    },
    refreshBoundaryFeaturesComplete() {
      this.defaultLayer = historyHlLayer.defaultLayer;
      this.activeHistoryRegion = {};
    },
    clearPlayMap() {
      const map = sgisMapBase.getMap();
      historyHlLayer.clearHisBoundary(map);
      this.playMapStatus = false;
      this.els[3].class = "el-icon-video-play";
      clearInterval(this.timeObj);
      sessionStorage.setItem("playMapStatus", this.playMapStatus);
      this.activeHistoryRegion = {};
    },
    //播放底图
    playMap() {
      let that = this;
      if (!this.playMapStatus) {
        this.playMapStatus = true;
        this.els[3].class = "el-icon-video-pause";
        clearInterval(this.timeObj);
        let hisLayerInfo = historyHlLayer.hisLayerInfo;
        const map = sgisMapBase.getMap();
        let i = 0;

        this.timeObj = setInterval(function() {
          historyHlLayer.hideHisBoundary(map);
          that.activeHistoryRegion = hisLayerInfo[i];
          let layerName = hisLayerInfo[i].layerName;
          if (map.getLayer(layerName)) {
            let layer = map.getLayer(layerName);
            map.setLayoutProperty(layerName, "visibility", "visible");
          }
          i++;
          if (!(i < hisLayerInfo.length)) {
            i = 0;
          }
        }, microConfig.playMapTime);
      } else {
        this.playMapStatus = false;
        this.els[3].class = "el-icon-video-play";
        clearInterval(this.timeObj);
      }
      sessionStorage.setItem("playMapStatus", this.playMapStatus);
    },
    getOtherLegendVisible(item) {
      this.otherLegends = item;
    },
    getOtherLegendHidden(item) {
      this.otherLegends = item;
      this.$refs.legendFrame.ColorPickerVisible = false;
    },
    closeLegend(item) {
      let key = "";
      let res = "";
      this.$refs.layers_zw.overLayerData.forEach((value, index) => {
        if (value.layerId === item.layerId) {
          key = index;
          res = item;
        }
      });
      this.$refs.layers_zw.setOverLayerHidden(res, key);
    },
    getPeriodMiddle(periodType,period){
      if(periodType === 1){
        return "年";
      }else if(periodType === 2){
        return "年 " + period.split("-")[1] + "月";
      }
      else if(periodType === 32){
        return "年 " + period.split("-")[1] + "季度";
      }else if(periodType === 33){
        return "年 " + period.split("-")[1] + "季度";
      }else if(periodType === 4){
        if(period.split("-")[1] === 1){
          return "年 " + "上半年";
        }
        return "年 " + "下半年";
      }
    }
  }
};
</script>

<style  rel='stylesheet' lang='scss' scoped>
@import "./../css/rule.scss";
$width: 38px;
$fontColor: #bbb;
.showCurrentTime {
  position: fixed;
  top: 70px;
  font-size: 30px;
  z-index: 800;
  color: #a50f15;
  text-align: center;
  width: 100%;
}
.formMate-data-box {
  z-index: 1200;
  width: 84%;
  height: 90%;
  background: transparent;
  .table-data-box {
    width: 100%;
    height: 100%;
  }
  position: fixed;
  right: 0;
  top: 0;
}
.map-control {
  padding: 0;
  margin: 0;
  width: $width;
  color: rgba(255, 255, 255, 0.8);
  background: $backGroundColor;
  position: fixed;
  right: 5px;
  top: 45%;
  z-index: 999;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.3);
  li {
    width: $width;
    list-style: none;
    cursor: pointer;
    .tubiao {
      width: $width;
      line-height: 39px;
      text-align: center;
      i {
        font-size: 20px;
        font-weight: bold;
      }
    }
    .line {
      margin: 0 auto;
      width: 20px;
      background: $fontColor;
      height: 2px;
    }
  }
}
.historyRegionLegend{
  position: absolute;
  bottom: 20px;
  left: 315px;
  cursor: default;
  background: rgba(18, 90, 120, 0.5);
  z-index: 1100;
  padding: 10px;
  height: auto;
  box-sizing: border-box;
  .title{
    text-align: center;
    color:$fontColorW;
    font-size: $fontSize;
  }
  .content{
    width:120px;
    height: auto;
    display: inline-block;
    .color{
      margin-top: 11px;
      width: 50px;
      height: 4px;
      float: left;
      margin-right: 10px;
    }
    p{
      color:$fontColorW;
      font-size: $fontSizeSmall;
      float: left;
      line-height: 2;
    }
  }
}
</style>
<style lang="scss">
.formMate-data-box {
  .el-select-dropdown {
    width: 194px;
  }
}
</style>
